<template>
    <div class="page">
        <van-nav-bar
            title="订单详情"
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="top">
            <div class="top-left"><img :src="params.goods_img" alt=""></div>
            <div class="top-right">
                <p>商品评分</p>
                <van-rate v-model="value1" />
            </div>
        </div>
        <div class="null"></div>
        <div class="content">
            <textarea name="" id="" cols="30" rows="10" v-model="pinglun_content"></textarea>
            <!-- <div class="upimg">
                <input id="upimg" type="file">
                <label for="upimg">选择图片</label>
            </div> -->
            <div class="upload_img">
                <div class="yulan_img">
                    <img v-for="(item,index) in yulan_img" :key="index" :src="item.content" alt="">
                </div>
                <van-uploader :after-read="onRead" accept  >
                    <van-icon name="photograph" />
                </van-uploader>
            </div>
            <div class="miaoshu">
                <div class="miaoshu-item">
                    <span>描述相符</span>
                    <van-rate  />
                </div>
                <div class="miaoshu-item">
                    <span>服务态度</span>
                    <van-rate />
                </div>
                <div class="miaoshu-item">
                    <span>物流服务</span>
                    <van-rate  />
                </div>
            </div>
        </div>
        <!-- <div class="niming">
            <div class="niming-left">
                <van-checkbox v-model="checked">匿名评价</van-checkbox>
            </div>
            <div class="niming-right">您的评价能帮助其他小伙伴更好的选择</div>
        </div> -->
        <div class="fabu"><van-button class="fabubtn" type="info" @click="uploadImg">发布评价</van-button></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
           value1: 0,
           checked:false,
           goods_details:{},
           params:{},//传过来的参数
           pinglun_content:"",
           yulan_img:[],
           shangchuan_img:''
        };
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        },
        //选择图片
        onRead(file) {
            console.log(file)
            this.yulan_img.push(file)
        },
        // 上传图片
        uploadImg(){
            var arr=[]
            for(var i in this.yulan_img){
                arr.push(
                    new Promise((resolve, reject)=>{
                        let formData=new FormData();//通过formdata上传
                        formData.append('file',this.yulan_img[i].file);
                        this.request.post('?controller=ucenter&action=comment_img_upload',formData,{
                            headers:{
                                'Content-Type':'multipart/form-data'
                            },
                            method:"post",
                        }).then(res=>{
                            console.log(res)
                            if(res.data.error=="上传成功"){
                                resolve(res.data.img)
                            }
                        })                   
                    })
                ) 
            }
            Promise.all(arr).then(res=>{
                this.shangchuan_img=res.join(",")
                this.pinglun()
            })
        },
        // 发表评论
        pinglun(){
            this.request({
                url:"?controller=theapi&action=comment_add",
                params:{
                    id:this.params.pingjia_id,
                    contents:this.pinglun_content,
                    _imgList:this.shangchuan_img,
                    point:this.value1
                }
            }).then(res=>{
                console.log(res)
                if(res.data.return_code=="success"){
                    this.$toast.success('评论成功');
                }
            })
        }
    },
    mounted(){
        var data=this.$route.params
        this.params=data
        console.log(this.params)
    }
}
</script>
<style scoped>
    .top{display: flex;padding: 0.25rem;}
    .top-left{width: 2.5rem;height: 1.5rem;}
    .top-left img{width: 100%;height: 100%;}
    .top-right{flex: 1;margin-left: 0.2rem;}
    .top-right{display: flex;justify-content: space-between;flex-direction: column;}
    .top-right p{font-size: 0.35rem;}
    .null{height: 0.2rem;background: #e6e6e6;}
    .content{padding: 0.25rem;border-bottom: 1px solid #e6e6e6}
    .content textarea{width: 100%;height: 3rem;padding: 0.1rem 0.2rem;box-sizing: border-box}
    .miaoshu{margin-top: 0.2rem;}
    .miaoshu-item{display: flex;align-items: center;font-size:0.3rem; margin-bottom:0.2rem; }
    .miaoshu-item span{margin-right: 0.2rem;}
    .niming{padding: 0.2rem;display: flex;justify-content: space-between;align-items: center;}
    .niming-right{color: #ccc}
    .fabu{position: fixed;width: 100%;bottom: 0;}
    .fabubtn{width: 100%;background: #f52e67;border: none}
    .van-nav-bar .van-icon{color: black}
    .yulan_img img{width: 2rem;height: 2rem;}
    .van-uploader i{font-size: 1rem;margin-top: 1.1rem;}
    .upload_img{display: flex;}
</style>


